<!---->
<script>
import { getFriendGroups } from '@/api/system/groups'

export default {
  name: '',
  data() {
    return {
      activeNames: ['1'],

      friendGroupList: []

    }
  },
  methods: {
    changeGroups(groupsId) {
      console.log('change groups')
    },
    clickGroups(item) {
      console.log('click groups', item)
    },

    /**
     * 获取分组
     */
    getFriendGroups() {
      getFriendGroups().then(({ data }) => {
        this.friendGroupList = data
      })
    }
  },
  created() {
    this.getFriendGroups()
  }
}
</script>

<template>
  <div>
    <van-collapse @change="changeGroups" v-model="activeNames">
      <div v-for="(item,index) in friendGroupList" :key="index" @click="clickGroups(item)">
        <van-collapse-item :disabled="!item.userCount" :name="item.groupId">
          <template #title>
            <div style="float: left">{{ item.groupName }}</div>
            <div style="float: right">{{ item.userCount }}</div>
          </template>

        </van-collapse-item>
      </div>


    </van-collapse>
  </div>
</template>

<style>
</style>
